import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom'
import { Flex, Toast, Modal, Badge, Carousel, NoticeBar } from 'antd-mobile';
import _ from 'lodash'

import { homeInfoOfParent } from "@/api/home"
import { R } from "@/assets/js/dict"

import './home.scss';

import a from '@/assets/img/a.jpg';
import b from '@/assets/img/b.jpg';


function ParentHome (props) {
    let [isVip] = useState(true); // 相当于 this.state
    let [badge, setBage] = useState({ msg: 0, teaching: 0, history: 0, looking: 0 });

    let [userInfo] = useState(() => {
        let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        return userInfo
    });

    let [latestMsg,setMsg] = useState("欢迎使用鹏睿家教");

    console.log('props ------->>>', props);

    function init () {
        let params = { parent_id: userInfo.id };

        //todo 这要改成统计未读的消息
        homeInfoOfParent(params, (res) => {
            if (R.isSuccess(res)) {
                let data = R.getData(res);
                if( data.count >0){
                    badge.msg = data.count;
                }
                if(data.looking > 0){
                    badge.looking = data.looking;
                }
                if(data.teaching > 0){
                    badge.teaching = data.teaching;

                }
                if(data.history > 0){
                    badge.history = data.history;
                }
                if(!!data.message_content){
                    setMsg(data.message_content);
                }
                setBage(_.cloneDeep(badge));
            }
        });
    }

    useEffect(init, []);

    function handleGoPage (url, data) {
        if (isVip) {
            props.history.push({
                pathname: url,
                params: {
                    data,
                }
            })
        } else {
            return (alert('提示',
                <b>使用本服务需成为会员方可使用
                        <br />
                    是否前往？
                    </b>,
                [
                    { text: '否', onPress: () => console.log('cancel') },
                    {
                        text: '是',
                        onPress: () =>
                            new Promise((resolve) => {
                                Toast.info('onPress Promise', 1);
                                setTimeout(resolve, 1000);
                            }),
                    },
                ]
            )
            )
        }
    }


    // 根据身份显示不同的模块
    function FunctionBlock () {
        return (
            <div>
                <Flex justify="center" direction="row" className="block-box" style={{ bottom: '32%' }}>
                    <div className="inline-block">
                        <span onClick={() => {
                            handleGoPage('/helpDetails')
                        }}>
                            <i className="icon notice"/>
                            家长须知
                        </span>
                    </div>
                    <div className="inline-block" onClick={() => {
                        handleGoPage('/lookForTutor')
                    }}
                    >
                        <Badge text={badge.looking} size="small" >
                            <span key={"msg"}>
                                <i className="icon form" />
                                找家教
                        </span>
                        </Badge>
                    </div>
                </Flex>
                <Flex justify="center" direction="row" className="block-box" style={{ bottom: '16%' }}>
                    <div className="inline-block" onClick={() => {
                        handleGoPage('/teachingOrdersOfParent')
                    }}
                    >
                        <Badge text={badge.teaching} size="small">
                            <span key={"teach"}>
                                <i className="icon padding" />
                                教学中
                        </span>
                        </Badge>
                    </div>
                    <div className="inline-block" onClick={() => {
                        handleGoPage('/historyOrdersOfParent')
                    }}
                    >

                        <Badge text={badge.history} size="small" overflowCount={99}>
                            <span key={"history"}>
                                <i className="icon history" />
                                历史订单
                        </span>
                        </Badge>

                    </div>
                </Flex>
            </div>
        )
    }

    return (
        <div className="parent-home">
            <div className="page-title  home-tit">
                首页
                <span className="infos" onClick={() => {
                    handleGoPage('/messagesOfParent')
                }}>
                    <Badge text={badge.msg} size="small" overflowCount={99} >
                        <i className="icon"/>
                    </Badge>
                </span>
            </div>
            <div className="page-content  home-content">
                <Carousel
                    infinite
                    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={index => console.log('slide to', index)}
                >
                    <img
                        src={a}
                        style={{ width: '100%', height: '160px', verticalAlign: 'top' }}
                        onLoad={() => {
                            window.dispatchEvent(new Event('resize'));
                        }}
                    />
                    <img
                        src={b}
                        style={{ width: '100%', height: '160px', verticalAlign: 'top' }}
                        onLoad={() => {
                            window.dispatchEvent(new Event('resize'));
                        }}
                    />
                </Carousel>
                <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                    {latestMsg}
                </NoticeBar>
                {FunctionBlock()}
            </div>
        </div>
    );
}

export default withRouter(ParentHome);